<template>
	<uni-nav-bar title="配送费膨胀异常处理" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package_sale">
		<view class="top">请输入车牌号</view>
		<view class="centers" @click="openPlatePicker()">
			<view v-for="(item,index) in 7" :key="index" :style="{display:numberplate?'none':'block'}"></view>
			<view v-for="(item,index) in list" :key="index" :style="{display:!numberplate?'none':'block'}">{{item}}
			</view>
		</view>
		<view class="top">拍照上传本单实际加注的车牌照片，保证车牌号清晰</view>
		<mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose" :maxCount="1" />
		<view class="top">请上传合影，保证人与车牌号清晰</view>
		<mk-upload :imgList="imgList1" @onDelete="onDelete1" @onChoose="onChoose1" :maxCount="1" />
		<view class="top">备注</view>
		<textarea class="textarea" v-model="value"></textarea>
	</view>
	<view class="add" @click="submit">确定</view>
	<!-- 车牌弹框 -->
	<VehiclePlatePad v-if="isShowPlatePad" @cancel="isShowPlatePad = false" @confirm="confirmPlate" />
	<Watermark ref="watermark" @selected="selected"></Watermark>
</template>

<script setup lang="ts">
	import { navBack } from '@/utils/navigator';
	import VehiclePlatePad from '@c/earthPushing/common/VehiclePlatePads.vue';
	import { errorToast, showLoading, showToast, successToast } from '@/utils/prompt';
	import Watermark from '@c/watermark.vue';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { toPublish } from '@mqtt';
	const value = ref()
	// 上传车牌图片
	const imgList = ref([])
	const image = ref()
	// 上传人车图片
	const imgList1 = ref([])
	const image1 = ref()
	const watermark = ref(null)

	const type = ref()

	const isShowPlatePad = ref(false); //添加车牌弹框
	const numberplate = ref(''); //车牌号
	const list = ref([])

	const orderID = ref()
	onLoad((pearm) => {
		orderID.value = Number(pearm.id)
	})

	// 上传车牌图片
	function onChoose(e : any) {
		watermark.value.fillTextToImg(e.tempFilePaths[0])
		console.log(e.tempFilePaths[0])
		type.value = 0
	}
	// 上传人车图片
	function onChoose1(e : any) {
		watermark.value.fillTextToImg(e.tempFilePaths[0])
		console.log(e.tempFilePaths[0])
		type.value = 1
	}
	function selected(e : any) {
		uni.uploadFile({
			url: 'https://admin.anlan.tech/api/common/upload2',
			filePath: e,
			name: 'file',
			formData: {
				'user': 'test'  // 上传附带参数
			},
			success: (uploadFileRes) => {
				console.log(JSON.stringify(uploadFileRes.data))
				const state = JSON.parse(uploadFileRes.data).data
				// 根据接口具体返回格式   赋值具体对应url
				if (type.value === 1) {
					imgList1.value.push(state.fullurl)
					image1.value = state.url
				} else {
					imgList.value.push(state.fullurl)
					image.value = state.url
				}
			},
			fail: (err : any) => {
				console.log('err', err)
			}
		});
	}
	// 删除车牌图片
	function onDelete() {
		imgList.value = []
		image.value = ''
	}
	// 删除人车图片
	function onDelete1() {
		imgList1.value = []
		image1.value = ''
	}
	/**
	  * 打开/关闭车牌弹框
	  */
	function openPlatePicker() {
		isShowPlatePad.value = true
	}
	//新增车牌
	function confirmPlate(plate : string) {
		numberplate.value = plate;
		isShowPlatePad.value = false;
		list.value = plate.split('')
	}
	function submit() {
		if (!numberplate.value) {
			showToast('请输入车牌号');
			return
		} else if (!image.value) {
			showToast('请上传车牌号照片');
			return
		} else if (!image1.value) {
			showToast('请上传人车照片');
			return
		}
		showLoading('正在提交');
		const payload1 = {
			order_id: orderID.value,
			cart_code: numberplate.value,
			cart_image: image.value,
			staff_image: image1.value,
			des: value.value
		};
		toPublish('control/doPengzhang', payload1, (obj : any) => {
			const { code, msg } = obj;
			if (code === 1) {
				successToast(msg)
				setTimeout(() => {
					navBack()
				}, 1000)
			} else {
				errorToast(msg)
			}
		});
	}
</script>

<style scoped lang="less">
	.add {
		width: 300rpx;
		height: 108rpx;
		background: #558AF1;
		border-radius: 5px;
		color: #FFFFFF;
		text-align: center;
		line-height: 108rpx;
		margin: 30px auto 0px;
	}

	.top {
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
		margin: 20rpx 0px;
	}

	.textarea {
		background-color: #eee;
		border-radius: 5px;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		height: 150rpx;
	}

	.centers {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			width: 72rpx;
			height: 72rpx;
			background: #eee;
			border: 1px solid #D3D3D3;
			border-radius: 5px;
			text-align: center;
			line-height: 78rpx;
		}
	}
</style>
<style>
	.package_sale>>>.textarea {
		width: 100%;
	}

	.package_sale>>>.mk-upload {
		padding: 0px;
	}

	.package_sale>>>.mk-upload_item {
		margin: 0px;
	}

	.package_sale>>>.uni-switch-input:before {
		background-color: #eee;
	}
</style>